{{#section 'head'}}
    <script src="/js/handlebars.min.js"></script>
    <!--请注意，我们必须转义至少一个大括号，否则，服务器端视图会尝试对其进行替换-->
    <script id="nurseryRhymeTemplate" type="text/x-handlebars-template">
        Marry had a little <b>\{{animal}}</b>, its <b>\{{bodyPart}}</b>
        was <b>\{{adjective}}</b> as <b>\{{noun}}</b>.
    </script>
{{/section}}
<div id="nurseryRhyme">点击一个按钮...</div>
<button id="btnNurseryRhyme">直接渲染</button>
<button id="btnNurseryRhymeAjax">AJAX调用渲染</button>
<p>一个通过JavaScript 来直接渲染，另一个通过AJAX 调用来渲染：</p>
<p>从本质上讲，Handlebars.compile 接收一个模板，返回一个方法。这个方法接收一个上下
    文对象，返回一个已渲染字符串。所以一旦我们编译了模板，就可以像调用方法函数一样
    重用模板渲染</p>
{{#section 'jquery'}}
    <script>
        $(document).ready(function () {
            var nurseryRhymeTemplate = Handlebars.compile($('#nurseryRhymeTemplate').html());
            var $nurseryRhyme = $('#nurseryRhyme');
            $('#btnNurseryRhyme').on('click', function (evt) {
                evt.preventDefault();
                $nurseryRhyme.html(nurseryRhymeTemplate({
                    animal: 'basilisk',
                    bodyPart: 'tail',
                    adjective: 'sharp',
                    noun: 'a needle'
                }));
            });
            $('#btnNurseryRhymeAjax').on('click', function (evt) {
                evt.preventDefault();
                $.ajax('/data/nursery-rhyme', {
                    success: function (data) {
                        $nurseryRhyme.html(nurseryRhymeTemplate(data))
                    }
                });
            });
        });
    </script>
{{/section}}